<!--
 * @Description:首页下的tabs切换 由于功能相对独立所以提取
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-29 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-29 18:30:01
-->
<template>
	<view class="home-tabs-container">
		<c-tabs v-model="activeTabs" @tabClick="tabClick">
			<c-tab-pane label="New Discovery" name="newDiscovery">
				<view class="new-discovery-box">
					<view class="new-discovery-card">
						<!-- 推荐的活动 -->
						<view class="discovery">
							<h2>Strive for novelty</h2>
							<view class="foot-box">
								<view class="img-box">
									<imageForSize radius="12" size="160" :src="require('@/static/images/home/sk-ll.png')">
									</imageForSize>
									<view class="tag">
										SK-LL
									</view>
								</view>
								<view class="info">
									<text>SK-LLtrial day limit ...</text>
									<view class="srob" @click="srob('sk-ll')">
										<text>1Srob</text>
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="discovery">
							<h2>Event promotion</h2>
							<view class="foot-box">
								<view class="img-box">
									<imageForSize radius="12" size="160" :src="require('@/static/images/home/dog.png')">
									</imageForSize>
									<view class="tag dog">
										DOG
									</view>
								</view>
								<view class="info">
									<text>SK-LLtrial day limit ...</text>
									<view class="srob" @click="srob('dog')">
										<text>1Srob</text>
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="new-discovery-card" v-for="(m,index) in newDiscovery" :key="index">
						<newDiscoveryCard :data="{...m,}"></newDiscoveryCard>
					</view>
				</view>
			</c-tab-pane>
			<c-tab-pane label="Game" name="Game"></c-tab-pane>
			<c-tab-pane label="Delicacy" name="Delicacy"></c-tab-pane>
			<c-tab-pane label="Outdoors" name="Outdoors"></c-tab-pane>
		</c-tabs>
	</view>
</template>
<script>
	import newDiscoveryCard from './new-discovery-card.vue'
	export default {
		components: {
			newDiscoveryCard
		},
		data() {
			return {
				activeTabs: 'newDiscovery',
				// 新品推荐列表
				newDiscovery: [{
						src: require("@/static/images/home/good-1.png"),
						goodName: 'fsdgadfhfgh bfgfgn',
						sales: '',
						price: '135',
						black: "unkmown",
						blue: 'Unknown object'
					},
					{
						src: require("@/static/images/home/good-2.png"),
						goodName: 'fsdgadfhfgh bfgfgn',
						sales: '',
						price: '800',
						black: "unkmown",
						blue: 'Unknown object'
					},
					{
						src: require("@/static/images/home/good-2.png"),
						goodName: 'fsdgadfhfgh bfgfgn',
						sales: '',
						price: '99',
						black: "unkmown",
						blue: 'Unknown object'
					},
				]
			}
		},
		methods: {
			// 
			tabClick() {},
			// 活动点击
			srob(key){
				console.log(key);
			},
		}
	}
</script>
<style scoped lang="scss">
	.home-tabs-container {
		/deep/  .c-tabs {
			.c-tabs-title {
				white-space: nowrap;
				overflow-x: scroll;

				.c-tabs-title-btn {
					white-space: nowrap;
					font-size: 32rpx;
					color: #999CAD;
					padding-bottom: 10rpx;
					margin: 0;

					&.is-current {
						color: #1B1D29;
						font-size: 40rpx;
					}
				}

				.title-active-bar {
					width: 44rpx !important;
					border-bottom: 6rpx solid #F3D099 !important;
					transform: translateX(50rpx);
				}
			}
		}

		// 新发现
		.new-discovery-box {
			display: flex;
			flex-wrap: wrap;

			.new-discovery-card {
				width: 330rpx;
				height: 508rpx;
				margin-bottom: 20rpx;

				&:first-child {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-bottom: 12rpx;

					.discovery {
						width: 100%;
						height: 242rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&:first-child {
							background: linear-gradient(135deg, #EAC8A3 0%, #FFFFFF 100%);
							border-radius: 18rpx 18rpx 18rpx 18rpx;
						}

						>h2 {
							padding: 20rpx 0 0 24rpx;
							font-size: 32rpx;
							font-weight: normal;
						}

						.foot-box {
							height: 160rpx;
							position: relative;

							.img-box {
								position: absolute;
								left: 0;
								bottom: 0;
								z-index: 10;
								box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
								border-radius: 12rpx;
								>.tag {
									position: absolute;
									width: 96rpx;
									height: 30rpx;
									bottom: -12rpx;
									left: 50%;
									transform: translateX(-50%);
									background-color: #fff;
									font-size: 24rpx;
									line-height: 30rpx;
									text-align: center;

									&.dog {
										background-color: #000;
										color: #E2CDB7;
									}
								}
							}

							.info {
								position: absolute;
								right: 0;
								width: 178rpx;
								height: 148rpx;
								background: linear-gradient(135deg, #E2CCB7 0%, #FFE9D1 100%);
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								bottom: 0;
								z-index: 9;
								padding: 20rpx 12rpx 12rpx 12rpx;

								>text {
									font-size: 28rpx;
								}

								>.srob {
									margin-left: auto;
									width: 108rpx;
									height: 40rpx;
									background: #000000;
									border-radius: 20rpx 20rpx 20rpx 20rpx;
									color: #FFF;
									font-size: 20rpx;
									display: flex;
									justify-content: right;
									align-items: center;
									padding-right: 8rpx;

									.u-icon {
										margin-left: 8rpx;
										width: 26rpx;
										height: 26rpx;
										background: #FFFFFF;
										border-radius: 50%;
										color: #000000;
									}
								}
							}
						}
					}
				}

				&:nth-child(2n) {
					margin-left: auto;
				}
			}

		}
	}
</style>
